<template>
  <div>
    <div>
      <div class="docker">
        <div div="container">
          <!-- nav -->
          <div class="row">
            <div class="nav">
              <a v-if="$auth.front_username == ''">
                <a style="color:#DE4323;margin-left: 150px;">
                  <router-link to="/login">亲，请登录</router-link>
                </a>
                <a class="div">免费注册</a>
              </a>
              <a v-else>
                <a style="color:#DE4323;margin-left: 150px;">
                  <router-link to="/login">用户: {{ $auth.front_username }}</router-link>
                </a>
                <a class="div" @click="Logout">登出</a>
              </a>
              <a style="margin-left: 400px;"></a>
              <a class="push"></a>
              <a class="push">
                <router-link to="/">科购首页</router-link>
              </a>
              <a class="push">
                <router-link to="/GoodsCar"><img src="../assets/car.png">&nbsp购物车</router-link>
              </a>
              <a class="push">
                <router-link to="/">订单详情</router-link>
              </a>
              <a class="push">
                <router-link to="/Recharge">充值页面</router-link>
              </a>
              <a class="push">
                <router-link to="/feedback">用户反馈</router-link>
              </a>
              <a class="push"></a>
            </div>
          </div>
          <!-- main -->
          <div class="row bg-light">
            <div class="col-4">
              <div class="main">
                <div class="logo">
                  <h1>科购</h1>
                  <p>KeGou</p>
                </div>
              </div>
            </div>
            <div class="col-2"></div>
            <div class="col-6">
              <div class="row">
                <div class="col">

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


    </div>

    <div class="container bg-light" style="margin-top: 40px;padding-bottom: 50px">
      <form>
        <div class="form-row form-group">
          <div class="col-6 text-left">
            <h3>订单详情(共 {{ this.tableData.length }} 件商品)</h3>
          </div>
          <div class="col-6 text-right">
          </div>
        </div>
        <div class="form-row form-group" style="border-bottom: 1px solid red"></div>
        <!--      这里实现数据-->

        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
          <el-table-column
            prop="ProductPic"
            label="商品图片"
            width="120">
            <template slot-scope="scope"><img :src="'data:image/jpeg;base64,'+scope.row.ProductPic" style="width: 50px">
            </template>
          </el-table-column>
          <el-table-column
            prop="ProductName"
            label="商品名称"
            width="200">
            <template slot-scope="scope">
              <router-link :to="{name:'GoodsDetail',params:{id:scope.row.Id}}">
                {{ scope.row.ProductName }}
              </router-link>
            </template>
          </el-table-column>
          <el-table-column
            prop="ProductPrice"
            label="商品单价"
            width="120">
          </el-table-column>
          <el-table-column
            prop="OrderNum"
            label="购买数量"
            width="120">
            <template slot-scope="scope">
              {{ scope.row.OrderNum }}
            </template>
          </el-table-column>
          <el-table-column
            label="商品总价"
            width="120">
            <template slot-scope="scope">{{ scope.row.OrderNum * scope.row.ProductPrice }}</template>
          </el-table-column>
          <el-table-column
            prop="OrderAddress"
            label="收货地址"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="区块Hash">
            <template slot-scope="scope">
              <a @click="openWindow(scope.$index, scope.row)"
                 style="color: #0000ff;text-decoration: underline">{{ scope.row.Hash }}</a>
            </template>
          </el-table-column>
        </el-table>
      </form>
    </div>
    <div class=" footer">
      <p>反馈建议 | 官方空间 | 空间活动 | 空间应用 | ABCmouse腾讯版 | 腾讯原创馆 | QQ互联 | QQ登录 | 社交组件 | 应用侵权投诉 | Complaint
        Guidelines</p>
      <p>Copyright 2005 - 2022 Tencent.All Rights Reserved.</p>
      <p><a href="https://beian.miit.gov.cn">湘ICP备2022018153号-1</a></p>
    </div>
  </div>
</template>

<!--订单管理模块-->
<script>
export default {
  name: "Order",
  data() {
    return {
      tableData: [],
    }
  },
  methods: {
    openWindow(index, row) {
      // 获取hash传递到新页面
      let url = "http://127.0.0.1:8080/verify?url=" + row.Hash
      window.open(url, "_blank")
    },
    Logout() {
      this.$auth.delFrontAuth()
      this.$router.push("/login")
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.SendOrder();
    },
    //获取用户订单
    GetUserOrder() {
      this.$http.get("/product/GetOrderList", {
        params: {
          "email": this.$auth.front_username //用户登陆的用户名
        },
        headers: {
          Authorization: "Bearer " + localStorage.getItem("front_token") //带着token去请求
        },
      }).then((rep) => {
        console.log(rep)
        if (rep.data.code == 401) {
          this.$router.push("/login")
          this.$notify.info({
            title: '系统信息',
            message: '请重新登陆'
          })
        } else {
          this.tableData = rep.data.order
        }
      }).catch((rep) => {
        console.log(rep)
      })
    }
  },
  //生命周期
  mounted() {
    this.GetUserOrder();
  }
}
</script>

<style scoped>
container {
  text-align: center;
  float: none;
}

mynav {
  display: inline-block;
}

body {
  height: 100%;
  background: no-repeat center fixed;
  background-size: 100% 100%;
}

col img {
  background-size: 30px 40px;
}

.h {
  color: #d1ab25;
  text-align: center;
}

.nav {
  border: 1px solid #F5F5F5;
  width: 100%;
  font-size: 10px;
  background-color: #F5F5F5;
}

.nav a {
  margin-top: 5px;
  margin-bottom: 5px;
  cursor: pointer;
}

.nav .div {
  margin-left: 30px;
  color: #8D8D8D;
}

.nav .push {
  margin-left: 30px;
  color: #8D8D8D;
}

.nav .push img {
  width: 15px;
  margin-left: 10px;
}

.logo {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  margin-left: 150px;
  margin-top: 40px;
  color: #EB5E2A;
}

.logo p {
  font-size: 20px;
  margin-top: -10px;
  margin-left: 9px;
}

.logo h5 {
  color: #171A1D;
  margin-top: -80px;
  margin-left: 85px;
}

.button input {
  border-style: none;
  background-color: transparent;
  color: #EB5E2A;

}

.button {
  margin-top: -34px;
  margin-left: 260px;
}

.register {
  margin-top: 200px;
  margin-left: 600px;

}

.Email input {
  height: 30px;
  width: 300px;
  border: 1px solid #ADB5BD;
}

.captcha input {
  height: 30px;
  width: 300px;
  border: 1px solid #ADB5BD;
}

.password input {
  margin-top: 20px;
  height: 30px;
  width: 300px;
  border: 1px solid #ADB5BD;
}

.th button {
  margin-top: 40px;
  margin-left: 650px;
  width: 300px;
  background: linear-gradient(to right, #F9CF9B, #F5B095);
  border: #EB5E2A;

}

.cb {
  margin-top: 25px;
  margin-left: 650px;
  font-size: 10px;

}

.cb input {
  vertical-align: sub;

}


.footer {
  margin-top: 60px;
  border: 1px solid #fff;
  text-align: center;
  font-size: 10px;
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
}

.footer p {
  margin-bottom: 0px;
}

.footer .p1 {
  border: 1px solid #fff;
  letter-spacing: 2px;
  margin-left: 4px;
}

.footer .p2 {
  letter-spacing: 2px;
  margin-left: -320px;
  margin-top: 5px;
}

.footer .p3 {
  letter-spacing: 2px;
  margin-right: 110px;
  margin-top: 5px;
}

.sign {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  margin-left: 150px;
  margin-top: 8px;
  color: #EB5E2A
}

.log h1 {
  font-size: 55px;
}

.log p {
  font-size: 3px;
  letter-spacing: 2px;
}

.btn csx {
  font-size: 30px;
}
</style>
